<template>
    <div>
        <!-- 头部导航组件 -->
        <Appnavigatebar title="注册第一步" :isshowright="false"></Appnavigatebar>
        <van-field v-model="tel" type="tel" label="手机号" />
        <div class="submit_box">
            <van-button type="primary" :disabled="isdisabled" round size="large" @click="submitFn">下一步</van-button>
        </div>
    </div>
</template>

<script>
import Appnavigatebar from '@/components/Appnavigatebar.vue';
// 引入注册接口
import { docheckphoneaApi } from '@/api/regist'
// import { Dialog } from 'vant';
export default {
    data() {
        return {
            tel: '',  //注册的手机号
            isdisabled: true, //默认按钮禁用
        }
    },
    components: {
        Appnavigatebar
    },
    watch: {
        tel: {
            handler(newvalue) {
                // console.log(newvalue);
                if (/^1[3-9]\d{9}$/.test(newvalue)) {
                    this.isdisabled = false
                } else {
                    this.isdisabled = true
                }
            }
        }
    },
    methods: {
        // 点击下一步触发
        submitFn() {
            docheckphoneaApi({
                tel: this.tel
            }).then(res => {
                console.log(res);
                this.$dialog.confirm({
                    title: '提示',
                    message: res.code == 200 ?
                        `将要向手机号${this.tel}发送验证码` :
                        '该用户已被注册,是否要登录?',
                }).then(() => {
                    //点击确定
                    if (res.code == 200) {
                        this.$router.push({
                            name: 'step2',
                            params: { tel: this.tel }
                        })
                    } else {
                        this.$router.push('/login')
                    }
                }).catch(() => {
                    //点击取消
                });
            })
        }
    }
}
</script>
<style scoped>
.submit_box {
    width: 100%;
    display: flex;
    margin-top: 50px;
    justify-content: center;
}

.van-button--large {
    width: 80%;
    height: 40px;
}
</style>